<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__log-operation">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
		  <el-form-item>
		    <el-input size="mini"  v-model="dataForm.keyContent" :placeholder="$t('log.keyContent')" clearable></el-input>
		  </el-form-item>
        <el-form-item>
          <el-select size="mini" v-model="dataForm.logType" :placeholder="$t('log.logType')" clearable>
			  <el-option :label="$t('log.logType1')" :value="'1'"></el-option>
            <el-option :label="$t('log.logType0')" :value="'0'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
		
		<el-form-item v-if="$hasPermission('sysLog:clear')">
		  <!-- <el-button size="mini" @click="clear()">{{ $t('log.clear') }}</el-button> -->
		  <el-popconfirm
		    confirm-button-text='清空'
		    cancel-button-text='不用了'
		    icon="el-icon-info"
		    icon-color="red"
		    title="确定清除  您所属公司的  全部日志吗？"
			 @confirm="clear()"
		  >
		    <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference">{{ $t('log.clear') }}</el-button>
		  </el-popconfirm>
		  
		</el-form-item>
       <!-- <el-form-item>
          <el-button size="mini" type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
        </el-form-item> -->
      </el-form>
	  
	  
	  
      <el-table v-loading="dataListLoading" :data="dataList" border @sort-change="dataListSortChangeHandle" style="width: 100%;">
        <el-table-column prop="username" :label="$t('log.username')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="description" :label="$t('log.description')" header-align="center" align="center">
			<template slot-scope="scope">
				<el-tag  size="mini" type="primary">{{ `${scope.row.description}` }}</el-tag>
			</template>
		</el-table-column>
		
        <el-table-column prop="method" :label="$t('log.method')" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="methodType" min-width="40px" :label="$t('log.methodType')" header-align="center" align="center"></el-table-column>
        <!-- <el-table-column prop="params" :label="$t('log.params')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column prop="time" min-width="50px" :label="$t('log.time')"  header-align="center" align="center">
          <template slot-scope="scope">
            {{ `${scope.row.time}ms` }}
          </template>
        </el-table-column>
        <el-table-column prop="logType" min-width="35px" :label="$t('log.logType')"  header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.logType === '0'" size="small" type="danger">{{ $t('log.logType0') }}</el-tag>
            <el-tag v-else size="small" type="success">{{ $t('log.logType1') }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="requestIp":label="$t('log.requestIp')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="browser" :label="$t('log.browser')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="requestId"  min-width="85px"  :label="$t('log.requestId')" header-align="center" align="center"></el-table-column>
		<el-table-column prop="createTime" min-width="80px"  :label="$t('createTime')"  header-align="center" align="center" width="180"></el-table-column>
		<el-table-column min-width="10px" v-if="$hasPermission('sysLog:get')" :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
		  <template slot-scope="scope">
			<el-button size="mini" type="text" v-if="scope.row.logType === '0' && $hasPermission('sysLog:get')"  @click="showDetailLog(scope.row.id,1)">{{ $t('log.exceptionDetail') }}</el-button>
			<el-button size="mini" type="text"   @click="showDetailLog(scope.row.id,2)">{{ $t('log.params') }}</el-button>
		  </template>
		</el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
	
	
	<el-dialog :title="$t('prompt.title')" :visible.sync="dialogFormVisible">
	  <el-form label-position="left" :model="detailForm">
	    <el-input
	      type="textarea"
	     :autosize="{ minRows: 2, maxRows: 30}"
	      :placeholder="detailForm.placeholder"
	      v-model="detailForm.exceptionDetail">
	    </el-input>
	  </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="dialogFormVisible = false">关闭</el-button>
	    <!-- <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> -->
	  </div>
	</el-dialog>
	
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
	  dialogFormVisible: false,
      mixinViewModuleOptions: {
        getDataListURL: '/pc/sysLog/page',
        getDataListIsPage: true,
        exportURL: '/sys/log/operation/export'
      },
      dataForm: {
        logType: '',
		keyContent: null
      },
	  detailForm: {
		  exceptionDetail: '',
		  placeholder: '正在加载中,请稍后...'
	  }
    }
  },
  methods:{
	  showDetailLog(obj,t){
		  this.detailForm.exceptionDetail = ''
		  this.detailForm.placeholder = '正在加载中,请稍后...'
		  this.dialogFormVisible = true
		  var p = {
			  params: {
				  id:obj
			  }
		  }
		  return this.$http.get('/pc/sysLog/get',p).then(({ data: res }) => {
		    if (res.code !== 200) {
		      return this.$message.error(res.msg)
		    }
		    this.detailForm.exceptionDetail = t === 1 ? res.data.exceptionDetail : res.data.params;
			if( t !== 1 && res.data.params === '' ){
				this.detailForm.placeholder = '';
			}
		  }).catch(() => {})
		 
	  },
	  clear() {
		  return this.$http.post('/pc/sysLog/clear').then(({ data: res }) => {
		    if (res.code !== 200) {
		      return this.$message.error(res.msg)
		    }
			this.getDataList();
			return this.$message.success(res.msg)
		  }).catch(() => {})
	  }
  }
}
</script>
